<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>竞猜系统</title>
<style>
body { font-family: Arial; padding: 20px; background: #f4f4f9; }
h1 { color: #d6336c; }
input, select, button { margin: 5px; padding: 5px; }
table { border-collapse: collapse; margin-top: 10px; width: 100%; }
table, th, td { border: 1px solid #ccc; }
th, td { padding: 5px; text-align: center; }
button { cursor: pointer; }
</style>
</head>
<body>

<h1>竞猜系统</h1>

<!-- 设置选手 -->
<div>
<label>选手A: <input type="text" id="playerA" value="选手A"></label>
<label>选手B: <input type="text" id="playerB" value="选手B"></label>
<button onclick="updatePlayers()">设置选手</button>
</div>

<h2>参与竞猜</h2>
<div>
<label>昵称: <input type="text" id="nickname"></label>
<label>投注选手:
<select id="betPlayer">
  <option value="A">选手A</option>
  <option value="B">选手B</option>
</select>
</label>
<label>积分: <input type="number" id="betPoints" min="1"></label>
<button onclick="addBet()">提交竞猜</button>
</div>

<h2>当前投注</h2>
<table id="betTable">
<tr>
<th>昵称</th><th>投注选手</th><th>投注积分</th><th>实时赔率</th>
</tr>
</table>

<h2>操作</h2>
<button onclick="stopBet()">终止竞猜</button>
<button onclick="newRound()">新开一局</button>

<div id="winnerButtons" style="display:none; margin-top:10px;">
选择获胜选手:
<button onclick="endBet('A')">选手A 胜利</button>
<button onclick="endBet('B')">选手B 胜利</button>
</div>

<h2>输赢明细</h2>
<table id="resultTable">
<tr>
<th>昵称</th><th>投注选手</th><th>投注积分</th><th>赔率</th><th>输赢积分</th>
</tr>
</table>

<h2>排行榜</h2>
<table id="rankTable">
<tr>
<th>排名</th><th>昵称</th><th>累计积分</th>
</tr>
</table>

<h2>历史记录</h2>
<table id="historyTable">
<tr>
<th>时间</th><th>获胜选手</th><th>昵称</th><th>投注积分</th><th>输赢积分</th>
</tr>
</table>

<script>
let bets = [];
let history = [];
let players = {A:'选手A', B:'选手B'};
let scores = {}; // 累计积分
let stopped = false;

function updatePlayers(){
    players.A = document.getElementById('playerA').value || '选手A';
    players.B = document.getElementById('playerB').value || '选手B';
    updateBetTable();
    alert('选手已更新');
}

function addBet(){
    if(stopped){ alert('竞猜已结束，无法投注'); return; }
    let nick = document.getElementById('nickname').value.trim();
    let player = document.getElementById('betPlayer').value;
    let points = parseInt(document.getElementById('betPoints').value);
    if(!nick || !points || points<=0){ alert('请输入昵称和有效积分'); return; }
    bets.push({nick, player, points});
    if(!scores[nick]) scores[nick]=0;
    updateBetTable();
}

function calcOdds(){
    let totalA = 0, totalB = 0;
    bets.forEach(b => { if(b.player=='A') totalA+=b.points; else totalB+=b.points; });
    return bets.map(b => {
        let odds = b.player=='A' ? (totalA>0?(totalA+totalB)/totalA:0) : (totalB>0?(totalA+totalB)/totalB:0);
        return {...b, odds:odds.toFixed(2)};
    });
}

function updateBetTable(){
    let table = document.getElementById('betTable');
    table.innerHTML = '<tr><th>昵称</th><th>投注选手</th><th>投注积分</th><th>实时赔率</th></tr>';
    calcOdds().forEach(b => {
        let tr = table.insertRow();
        tr.insertCell(0).innerText = b.nick;
        tr.insertCell(1).innerText = b.player=='A'?players.A:players.B;
        tr.insertCell(2).innerText = b.points;
        tr.insertCell(3).innerText = b.odds;
    });
}

function stopBet(){
    if(stopped){ alert('已终止'); return; }
    stopped = true;
    alert('竞猜已终止，开始选择获胜选手');
    document.getElementById('winnerButtons').style.display='block';
}

function endBet(winPlayer){
    if(!stopped){ alert('请先点击终止竞猜'); return; }
    let winName = winPlayer=='A'?players.A:players.B;
    let totalWin = bets.filter(b=>b.player==winPlayer).reduce((a,b)=>a+b.points,0);
    let totalLose = bets.filter(b=>b.player!=winPlayer).reduce((a,b)=>a+b.points,0);
    let results = [];
    calcOdds(); // 更新赔率
    bets.forEach(b=>{
        let gain = b.player==winPlayer ? (totalWin>0?b.points*totalLose/totalWin:0) : -b.points;
        scores[b.nick]+=gain;
        history.push({time:new Date().toLocaleString(), winner:winName, nick:b.nick, points:b.points, gain:gain});
        results.push({...b, odds:calcOdds().find(x=>x.nick==b.nick).odds, gain:gain.toFixed(2)});
    });
    updateResultTable(results);
    updateRankTable();
    updateHistoryTable();
    alert('结算完成');
}

function updateResultTable(results){
    let table = document.getElementById('resultTable');
    table.innerHTML = '<tr><th>昵称</th><th>投注选手</th><th>投注积分</th><th>赔率</th><th>输赢积分</th></tr>';
    results.forEach(b=>{
        let tr = table.insertRow();
        tr.insertCell(0).innerText = b.nick;
        tr.insertCell(1).innerText = b.player=='A'?players.A:players.B;
        tr.insertCell(2).innerText = b.points;
        tr.insertCell(3).innerText = b.odds;
        tr.insertCell(4).innerText = b.gain;
    });
}

function updateRankTable(){
    let table = document.getElementById('rankTable');
    table.innerHTML = '<tr><th>排名</th><th>昵称</th><th>累计积分</th></tr>';
    let arr = Object.entries(scores).sort((a,b)=>b[1]-a[1]);
    arr.forEach((s,i)=>{
        let tr = table.insertRow();
        tr.insertCell(0).innerText = i+1;
        tr.insertCell(1).innerText = s[0];
        tr.insertCell(2).innerText = s[1].toFixed(2);
    });
}

function updateHistoryTable(){
    let table = document.getElementById('historyTable');
    table.innerHTML = '<tr><th>时间</th><th>获胜选手</th><th>昵称</th><th>投注积分</th><th>输赢积分</th></tr>';
    history.forEach(h=>{
        let tr = table.insertRow();
        tr.insertCell(0).innerText = h.time;
        tr.insertCell(1).innerText = h.winner;
        tr.insertCell(2).innerText = h.nick;
        tr.insertCell(3).innerText = h.points;
        tr.insertCell(4).innerText = h.gain.toFixed(2);
    });
}

function newRound(){
    bets = [];
    stopped = false;
    document.getElementById('winnerButtons').style.display='none';
    document.getElementById('resultTable').innerHTML='<tr><th>昵称</th><th>投注选手</th><th>投注积分</th><th>赔率</th><th>输赢积分</th></tr>';
    updateBetTable();
    alert('新一轮竞猜已开始');
}
</script>
</body>
</html>
